<template>
	<view class="pt">
		<view class="pt-item" @click="ptSelectFc(2)">
			<text class="pt-name">京东</text>
			<view v-if="type == 2" class="pt-desc pt-desc-active">品牌特卖</view>
			<view v-if="type != 2" class="pt-desc">品牌特卖</view>
		</view>
		<view class="pt-item" @click="ptSelectFc(1)">
			<text class="pt-name">淘宝</text>
			<view v-if="type == 1" class="pt-desc pt-desc-active">精选宝贝</view>
			<view v-if="type != 1" class="pt-desc">精选宝贝</view>
		</view>
		<view class="pt-item" @click="ptSelectFc(3)">
			<text class="pt-name">拼多多</text>
			<view v-if="type == 3" class="pt-desc pt-desc-active">件件必选</view>
			<view v-if="type != 3" class="pt-desc">件件必选</view>
		</view>
		<view class="pt-item" @click="ptSelectFc(4)">
			<text class="pt-name">唯品会</text>
			<view v-if="type == 4" class="pt-desc pt-desc-active">大牌折扣</view>
			<view v-if="type != 4" class="pt-desc">大牌折扣</view>
		</view>
	</view>
</template>

<script>
	export default {
		name:"ptList",
		props:{
			type: {
				type:[Number, String],
				default:2
			}
		},
		methods:{
			ptSelectFc(select){
				 this.$emit('change',select)
			},
		}
	}
</script>

<style>
	.pt{
		display: flex;
		flex-direction: row;
		background-color: #fff;
		margin: 0 20rpx;
		padding: 20rpx 0;
		border-radius: 10rpx;
		justify-content: space-around;
	}
	.pt-item{
		display: flex;
		flex-direction: column;
		align-items: center;
	}
	.pt-name{
		font-size: 34rpx;
		font-weight: bold;
	}
	.pt-desc{
		font-size: 24rpx;
		margin-top: 10rpx;
		padding: 4rpx 10rpx;
	}
	.pt-desc-active{
		background-color: #d8741e;
		color: #fff;
		border-radius: 20rpx;
	}
</style>
